<!-- 告警中心 -->

<template>
  <div class="AlarmRight">
    <!-- 告警总数 -->
    <div class="alarm-total">
      <div class="title"><span class="cn">告警总数(今日)</span> <span class="en">number of alarms</span></div>
      <div class="result">
        <img src="../../../assets/img/alarm/alarm-danger.png" alt="" />
        <div>
          <b>{{ model.alarmTotal }}</b>
          <span>次</span>
        </div>
      </div>
    </div>
    <!-- 告警统计 -->
    <div class="alarm-statistics">
      <div class="title"><span class="cn">告警统计(今日)</span> <span class="en">Alarm Statistics</span></div>
      <div class="result">
        <div style="width: 50%">
          <PieChart
            id="pieChartB"
            :colorList="['#56F6FF', '#FFE671', '#FF594D']"
            :radius="['50%', '70%']"
            :data-list="model.assetDetailPieSourceList"
          ></PieChart>
        </div>
        <div style="width: 50%">
          <PieChart
            id="pieChartC"
            :colorList="['#FF594D', '#56F6FF']"
            :radius="['50%', '70%']"
            :data-list="model.alarmResolveStateTotal"
          ></PieChart>
        </div>
      </div>
    </div>
    <!-- 告警趋势(今日) -->
    <div class="alarm-trend">
      <div class="title"><span class="cn">告警趋势(今日)</span> <span class="en">Alarm trend</span></div>
      <div class="result">
        <LineChart
          id="lineChartB"
          :data-list="model.assetDetailLineSourceList"
          :axis-list="model.assetDetailLineXAxisList"
        ></LineChart>
      </div>
    </div>
    <!-- 告警分布(今日) -->
    <div class="alarm-trend">
      <div class="title"><span class="cn">告警分布(今日)</span> <span class="en">Alarm distribution</span></div>
      <div class="result">
        <BarChart
          id="barChartB"
          :data-list="model.assetDetailBarSourceList"
          :axis-list="model.assetDetailBarXAxisList"
        ></BarChart>
      </div>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import index from './index'
// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'Right',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixLoop(), index],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      loop: true, // 循环开关
      LOOP_PERIOD: 600, // 循环周期 (单位秒，默认 10 分钟)
    }
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 循环事件 (可覆盖)
     */
    toLoop() {
      //
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
